<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- form 最外层容器 -->
    <form action="#">
      <!-- 输入框  单标签 type 设置类型 -->
      <div>
        <label for="user">姓名：</label>
        <input type="text" placeholder="用户名" name="username" id="user" />
      </div>
      <div>
        <label for="pass">密码：</label>
        <input type="password" placeholder="密码" name="password" id="pass" />
      </div>
      <div>
        <!-- radio 需要结合相同的 name 进行互斥 -->

        <input type="radio" name="male" id="male1" /><label for="male1"
          >男</label
        >
        <input type="radio" name="male" id="male2" /><label for="male2"
          >女</label
        >
        <input type="radio" name="male" id="male3" /><label for="male3"
          >保密</label
        >
      </div>
      <div>
        <!-- checkbox  多选 -->
        <input type="checkbox" name="habbit" id="habbit1" /><label for="habbit1"
          >睡觉</label
        >
        <input type="checkbox" name="habbit" id="habbit2" /><label for="habbit2"
          >唱</label
        >
        <input type="checkbox" name="habbit" id="habbit3" /><label for="habbit3"
          >跳</label
        >
        <input type="checkbox" name="habbit" id="habbit4" /><label for="habbit4"
          >吃</label
        >
      </div>
      <div>
        <label for="info">信息：</label>
        <textarea
          name="info"
          id="info"
          cols="30"
          rows="10"
          placeholder="输入你的信息"
        ></textarea>
      </div>
      <div>
        <!-- 根据设置的 action 提交数据 -->
        <button type="submit">提交</button>
        <!-- 重置表单元素的值 -->
        <button type="reset">重置</button>
      </div>
    </form>
    <h1>自己写的百度</h1>
    <!-- https://www.baidu.com/s?wd=%E9%85%B7tf-8&tn=baiduhom=5577 
    如果要跳转搜索，那么要在？之前开始截取跳转地址，？问号之后=号之前的是name，等号之后是用户输入的内容
    自动生成的。
    -->
    <form action="https://www.baidu.com/s">
      <input type="text" name="wd" placeholder="请输入查询的内容" />
      <button type="submit">点击搜索</button>
      <button type="button">没有默认行为</button>
    </form>

    <h1>自己写的B站</h1>
    <!-- https://search.bilibili.com/all?keyword=%E9%AD%94%E5%85%BD%E4%B8%96%E7%95%8C%E5%9B%BD%E6%9C%8D&search_source=1
    如果要跳转搜索，那么要在？之前开始截取跳转地址，？问号之后=号之前的是name，等号之后是用户输入的内容
    自动生成的。
    -->
    <form action="https://search.bilibili.com/all">
      <input type="text" name="keyword" placeholder="请输入查询的内容" />
      <button type="submit">点击搜索</button>
      <button type="button">没有默认行为</button>
    </form>
  </body>
</html>
